import AppProvider from "../../../sources/AppProvider.ts";
import {useEffect, useState} from "react";
import DGFadeView from "../../../components/DGFadeView.tsx";
import DGListView from "../../../components/DGListView.tsx";

import DGListViewItem from "../../../components/DGListViewItem.tsx";
import {ArrowBack} from "@mui/icons-material";
import {useNavigate} from "react-router-dom";
import DGFooterView from "../../../components/DGFooterView/DGFooterView.tsx";
import {Box, Button, useTheme} from "@mui/material";
import DGTextView from "../../../components/DGTextView.tsx";
import IconButton from "@mui/material/IconButton";
import DGConnect from "../../../sources/DGConnect.ts";

const DGSecurityOperates = () => {
    // 全局上下文
    const App = AppProvider.useAppContext();
    // 路由跳转
    const router = useNavigate();
    // 查询模式
    const m = useTheme().palette.mode === "light";
    // 加载状态
    const [loading, setLoading] = useState(false);
    // 错误信息
    const [error, setError] = useState({state: false, text: ""});
    // 列表数据
    const [list, setList] = useState([]);

    const getOperateList = () => {
        // 开始加载
        setLoading(true);
        // 清除提示错误
        setError({state: false, text: ""});
        DGConnect.POST(JSON.stringify({type: 'operate'}), result => {
            // 关闭加载
            setLoading(false);
            // 错误信息
            if (result["data"]["code"] !== 200) return setError({state: true, text: result["data"]["message"]});
            // 设置数据
            setList(result['data']["result"]);
        }, () => {
            // 关闭加载
            setLoading(false);
            // 提示错误和重试
            setError({state: true, text: "遇到了一些问题，请尝试重试，或者及时联系我们！"});
        });
    }

    // 获取操作记录
    useEffect(() => {
        if (App?.info) getOperateList();
    }, [App?.info]);

    // 设置标题
    useEffect(() => {
        App?.setTitle("操作记录");
    }, [App]);

    return (<DGFadeView time={800} load autoLoad>

        {/* 返回选项 */}
        <Box style={{
            margin: "15px 15px", padding: "10px 15px",
            display: "flex", alignItems: "center", gap: "15px",
            backgroundColor: m ? "#EDEDED" : "#222222",
        }}>
            <IconButton onClick={() => router(-1)}>
                <ArrowBack/>
            </IconButton>
            <DGTextView Body Bold>返回上一页</DGTextView>
        </Box>


        {/* 未登录 */}
        {!App?.info && <Box style={{
            minHeight: "50vh",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
        }}>
            <DGTextView Body Bold>您未进行登录！</DGTextView>
        </Box>}


        {/* 查询失败 */}
        {App?.info && error.state && !loading && <Box style={{
            minHeight: "50vh",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            gap: "50px"
        }}>
            <DGTextView Body Bold>{error.text}</DGTextView>
            <Button onClick={() => getOperateList()}>点击重试</Button>
        </Box>}

        {/* 已登录 */}
        {App?.info && !error.state && <DGFadeView time={1000} load={loading}>
            {/* 操作记录列表 */}
            <DGListView title="操作记录" subTitle="只展示最近 30 天的相关操作记录" NoBackground gap={10}>
                {list.length > 0 && list.map((value, index) => {
                    const io = Number(value['operate']);
                    const ops = io === 100 ? "登录" : (io >= 200 && io < 300) ? "更改" : io === 300 ? "冻结" : "解冻";
                    // console.log(value['info_ops'])
                    return (<DGListViewItem
                        key={index} icon={String(index + 1)} title={ops + "：" + value['opText']}
                        subText={value['time'] + " IP：" + value['network']}/>)
                })}
            </DGListView>
            {/* 网站底部 */}
            <DGFooterView/>
        </DGFadeView>}
    </DGFadeView>)
}

export default DGSecurityOperates;